@import compass/css3

@import mixins
@import keyframes

@import offline-theme-base

$red: #ec8787
$green: #d6e9c6
$yellow: #f8ecad

$darkRed: #551313
$darkGreen: #468847
$darkYellow: #7c6d1f

+keyframes-offline-fadein
+keyframes-offline-fadeout-and-hide

+keyframes-offline-rotation

.offline-ui
    +border-radius(4px)
    font-family: "Helvetica Neue", sans-serif
    padding: 1em
    top: 1em
    width: 38em
    max-width: 100%
    overflow: hidden

    @media (max-width: 38em)
        +border-radius(0)
        top: 0

    .offline-ui-content:before
        line-height: 1.25em

    .offline-ui-retry
        position: absolute
        right: 3em
        top: 0
        bottom: 0
        background: rgba(0, 0, 0, .1)
        text-decoration: none
        color: inherit
        line-height: 3.5em
        height: 3.5em
        margin: auto
        padding: 0 1em

    &.offline-ui-up
        +offline-animation(offline-fadeout-and-hide forwards .5s 2s)
        background: $green
        color: $darkGreen

    &.offline-ui-down
        +offline-animation(offline-fadein .5s)
        background: $red
        color: $darkRed

        &.offline-ui-connecting, &.offline-ui-waiting
            background: $yellow
            color: $darkYellow
            padding-right: 3em

            &:after
                +offline-animation(offline-rotation .7s linear infinite)
                +border-radius(50%)
                content: " "
                display: block
                position: absolute
                right: 1em
                top: 0
                bottom: 0
                margin: auto
                height: 1em
                width: 1em
                border: 2px solid rgba(0, 0, 0, 0)
                border-top-color: $darkYellow
                border-left-color: $darkYellow
                opacity: 0.7

        &.offline-ui-waiting
            padding-right: 11em

            &.offline-ui-reconnect-failed-2s
                padding-right: 0
